<template>
    <el-container style="height: 100%;">
        <!-- 顶部内容 -->
        <el-header style="background-color: rgb(0, 242, 255); height:15%;">
            <!-- 放minio图片的网络路径 -->
            <el-col :span="5">
                <div>
                    <img :src="logoUrl" width="50%">  
                </div>
            </el-col>
            <el-col :span="11" style="margin-top:30px ">
                <el-menu  router default-active="1"  mode="horizontal"  style=" background-color: rgb(0, 242, 255)">
                    <el-menu-item index="/">首页</el-menu-item>
                    <el-menu-item index="1" >系统管理</el-menu-item>
                    <el-menu-item index="2">仓储管理</el-menu-item>
                    <el-menu-item index="3">订单管理</el-menu-item>
                    <el-menu-item index="4">财务管理</el-menu-item>
                    <el-menu-item index="5">数据统计</el-menu-item>
                    <el-menu-item index="6">权限管理</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="3" style="margin-top:50px; background-color: rgb(0, 242, 255)" :offset="5">
                <div  style=" background-color: rgb(0, 242, 255)">
                    欢迎登录：{{张三XXX}}
                </div>
            </el-col>
            <el-col :span="1" style="margin-top:-30px;" :offset="7">
                <!-- 退出按钮 
                  :offset="6" 向右偏移6等份
                -->
                <el-button type="danger" @click="goOut()">退出</el-button>
            </el-col>
        </el-header>


        <!-- 放导航菜单 -->
        <el-container>
            <el-aside width="200px" style="background-color: rgb(84, 92, 100)">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                          <i class="el-icon-user"></i>
                          <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">商品类别管理</el-menu-item>
                            <el-menu-item index="1-2">计量单位管理</el-menu-item>
                            <el-menu-item index="1-3">区域管理</el-menu-item>
                            <el-menu-item index="1-4">商品资料管理</el-menu-item>
                            <el-menu-item index="1-5">供应商资料管理</el-menu-item>
                            <el-menu-item index="1-6">客户资料管理</el-menu-item>
                            <el-menu-item index="1-7">仓库管理</el-menu-item>
                            <el-menu-item index="1-8">部门管理</el-menu-item>
                            <el-menu-item index="1-9">员工管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                          <i class="el-icon-s-home"></i>
                          <span>仓储管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">原材料入库</el-menu-item>
                            <el-menu-item index="2-2">原材料领料</el-menu-item>
                            <el-menu-item index="2-3">成品入库</el-menu-item>
                            <el-menu-item index="2-4">次品入库</el-menu-item>
                            <el-menu-item index="2-5">成品发货</el-menu-item>
                            <el-menu-item index="2-6">次品处理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                          <i class="el-icon-tickets"></i>
                          <span>订单管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1">发货订单管理</el-menu-item>
                            <el-menu-item index="3-2">退货订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                          <i class="el-icon-money"></i>
                          <span>财务管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">应收款管理</el-menu-item>
                            <el-menu-item index="4-2">应退款管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                          <i class="el-icon-notebook-2"></i>
                          <span>数据统计</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1">仓库报表</el-menu-item>
                            <el-menu-item index="5-2">财务报表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>



            <el-main>
                
            </el-main>



        </el-container>
    </el-container>
  
</template>

<script>
export default {
    data(){
        return{
            logoUrl: "http://127.0.0.1:9000/freshpicture/%E7%94%9F%E9%B2%9Clogo.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20240722%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240722T105419Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&versionId=null&X-Amz-Signature=85c7dadac86e28dd201bc6ca651b0158ad897619014d731babeabf82fa40eed4"
        }
    },
    methods:{
        goOut(){
            // 安全退出方法
        }
    }


}
</script>

<style scoped>
.el-menu{
    border: 0;
}

</style>